import React from "react";
import {ListInfo, ListItem, LoadMore} from '../style'
import {connect} from "react-redux";
import {actionCreators} from "../store";
import {Link} from 'react-router-dom'

const List = (props) => {
    return (
        <div>
            {
                props.list.map((item) =>
                    (
                        <Link to={'/detail/'+item.get('id')} key={item.get('id')}>
                        {/*<Link to={'/detail?id='+item.get('id')} key={item.get('id')}>*/}
                            <ListItem key={item.get('id')}>
                                <img className='pic'
                                     src={item.get('imgUrl')}/>
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    )
                )
            }
            <LoadMore onClick={() => props.getMoreList(props.page)}>更多文字</LoadMore>
        </div>
    );
}

const mapState = (state) => ({
        list: state.get('home').get('articleList'),
        page: state.getIn(['home', 'articlePage'])
    }
);
const mapDispatch = (dispatch) => ({
    getMoreList(page) {
        dispatch(actionCreators.getMoreList(page));
    }
})
export default connect(mapState, mapDispatch)(List);